<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}
			.box{
				width: 600px;
				height: 600px;
				background-color: mediumvioletred;
				position: absolute;
				top:50%;
				left:50%;
				margin-top:-300px;
				margin-left:-300px;
			}
			
			.box::before{
				content: "9月1日";
				width: 400px;
				height: 400px;
				border-top: 2px solid black;
				border-bottom:2px solid black; 
				display: block;
				position: absolute;
				top:50%;
				left: 50%;
				transform:translate(-50%,-50%) scale(0)  rotateX(7200deg);
				font-size: 50px;
				color: #000000;
				text-align: center;
				line-height: 400px;
				letter-spacing: 12px;   /* 字与字之间的间距 */
				/* word-spacing:  英文间距*/
				/* display: none; 动画不能设置display*/
				
				transition-property:all ;   /* 设置需要变化的属性 */
				transition-duration: 500ms;     /* 设置动画的时间 */
				transition-timing-function:linear;
				transition-delay: 0;
				opacity: 0;
			}
			
			.box:hover::before{
				transform:translate(-50%,-50%) scale(1) rotateX(0deg);
				opacity: 1;    /* 设置为none,所以要display 出来; */

			}
		</style>
	</head>
	<body>
		
		<div class="box">
			
		</div>
	</body>
</html>
